<template>
    <view class="hpv_info">
        <view class="hpv_detail">
            <view class="hpv_name">
                {{ hpv_info.hpv_name }}
            </view>
            <view class="hpv_desc">
                <view class="hpv_desc_item" v-for="(item, index) in hpv_info.hpv_desc" :key="index">
                    <view class="txt">{{ item }}</view>
                </view>
            </view>
        </view>
        <view class="hpv_price">
            ￥{{ hpv_info.hpv_price[0] }} - ￥{{ hpv_info.hpv_price[1] }}
        </view>
    </view>

    <!-- hpv预约表单 -->
    <view class="hpv_form mt16">
        <view class="form_item">
            <view class="form_label">姓名</view>
            <input type="text" class="form_input" placeholder="请输入姓名">
        </view>

        <view class="form_item">
            <view class="form_label">身份证</view>
            <input type="text" class="form_input" placeholder="请输入姓名">
        </view>

        <view class="form_item">
            <view class="form_label">性别</view>
            <picker mode="selector" :range="['男', '女']" class="address_picker">
                <view class="address">
                    <view class="address_info">请选择性别</view>
                    <image src="/static/other/gengduo.svg" mode="" />
                </view>
            </picker>
        </view>

        <view class="form_item">
            <view class="form_label">出生日期</view>
            <picker mode="date" class="address_picker">
                <view class="address">
                    <view class="address_info">请选择出生日期</view>
                    <image src="/static/other/gengduo.svg" mode="" />
                </view>
            </picker>
        </view>

        <view class="form_item">
            <view class="form_label">手机号</view>
            <input type="text" class="form_input" placeholder="请输入手机号">
        </view>
    </view>

    <!-- 套餐名称 -->
    <view class="taocan_box mt16">
        <view class="taocan_name">{{ taocanNames.obj.title }}</view>
        <view class="taocan_detail mt16">
            <view @click="selectTaocanName(index, item.combo_id)" class="taocan_detail_item"
                v-for="(item, index) in taocanNames.obj.name" :key="item.combo_id"
                :class="taocanNameIndex === index ? 'active' : ''">
                {{ item.combo }}
            </view>
        </view>
    </view>
    <!-- 预计接种时间 -->
    <view class="taocan_box mt16">
        <view class="taocan_name">{{ taocanTimes.obj.title }}</view>
        <view class="taocan_detail mt16">
            <view :class="taocanTimeIndex === index ? 'active' : ''" @click="selectTaocanTime(index, item.time_id)"
                class="taocan_detail_item" v-for="(item, index) in taocanTimes.obj.name" :key="item.time_id">
                {{ item.time }}
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { onMounted, reactive, ref, watch } from "vue";
import type { hpvOptions, taocanNamesType, taocanTimesType } from '@/dataType/data'
import { getTaoCanListApi, getTaoCanPriceApi } from '@/http/api'


const hpv_info = reactive({
    hpv_id: '',
    hpv_name: '',
    hpv_desc: [] as string[],
    hpv_price: [] as string[]
})
onLoad((options: any) => {
    const hpvObj = JSON.parse(options.objstr) as hpvOptions;
    hpv_info.hpv_name = hpvObj.hpv_name;
    hpv_info.hpv_desc = hpvObj.hpv_desc;
    hpv_info.hpv_price = hpvObj.hpv_price
    hpv_info.hpv_id = hpvObj.id
})

//进入页面加载套餐数据
onMounted(() => {
    getTaoCanList()
})


const taocanNames = reactive<{ obj: taocanNamesType }>({
    obj: {
        title: '',
        _id: '',
        name: [],
    }
})
const taocanTimes = reactive<{ obj: taocanTimesType }>({
    obj: {
        title: '',
        _id: '',
        name: []
    }
})
const getTaoCanList = async () => {
    const res = await getTaoCanListApi()
    taocanNames.obj = res.data.data[0]
    taocanTimes.obj = res.data.data[1]
}

//选中套餐名称id
const taocanNameId = ref('')
//选中套餐名称下标
const taocanNameIndex = ref(-1)

//选中接种时间id
const taocanTimeId = ref('')
//选中接种时间下标
const taocanTimeIndex = ref(-1)


//选中套餐名称
const selectTaocanName = (i: number, name_id: string) => {
    taocanNameId.value = name_id
    taocanNameIndex.value = i
}

//选中接种时间
const selectTaocanTime = (i: number, time_id: string) => {
    taocanTimeId.value = time_id;
    taocanTimeIndex.value = i;
}

//监听套餐id和接种时间id的变化
//watch(监听谁,回调函数,配置项)
// watch(() => taocanNames.obj.title, () => {

// })
watch([taocanNameId, taocanTimeId], (newV, oldV) => {

    // console.log('旧：', oldV)
    if (newV[0].length > 0 && newV[1].length > 0) {
        //调用价格接口，返回新价格
        totalPriceFn(newV[0], newV[1])
    }
})

const totalPriceFn = async (nameId: string, timeId: string) => {
    //调用套餐价格要接口
    const res = await getTaoCanPriceApi({
        hpv_id: hpv_info.hpv_id,
        combo_id: nameId,
        time_id: timeId
    })

    console.log('返回套餐价格：', res)
}

</script>

<style lang="scss">
@import '@/assets/style/public.scss';

page {
    background: #f7f7f7;
}

.hpv_info {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    background: #fff;

    .hpv_price {
        color: #fd6037;
        font-weight: bold;
    }
}

.hpv_form {
    background: #fff;
}

.taocan_box {
    background: #fff;
    padding: 20rpx;

    .taocan_detail {
        display: flex;

        .taocan_detail_item {
            padding: 10rpx 20rpx;
            background: #f7f7f7;
            margin-left: 16rpx;
        }
    }
}

.active {
    background: #4577e2 !important;
    color: #fff !important;
}
</style>